<template>
      <a-modal
        :title="addUserData.title"
        v-model="addUserData.show"
        width="900px"
        wrapClassName="addUser"
        style="overflow:hidden;"
        @cancel="handleClose">
        <div style="padding:0 50px 20px 50px;overflow-y:auto;height:200px;box-sizing:border-box;width:100%">
        <el-row :gutter="36">
            <el-form :disabled="addUserData.type=='view'?true:false" ref="parames" :rules="rules" size="small" :model="parames" label-width="100px" label-position="left">
                    <div style="margin-top:50px">
                      <el-col :span="12">
                        <el-form-item label="人员名称:" prop="contactsName">
                          <el-input  v-model="parames.contactsName" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="角色:" prop="contactsRole">
                            <el-select style="width:100%"  v-model="parames.contactsRole" multiple placeholder="请选择" @change="changeRole">
                                <el-option v-for="(item,index) in roleData" :key="index" :label="item.desc" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="手机号码:">
                          <el-input  v-model="parames.contactsMobile" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="备注:">
                          <el-input  v-model="parames.remark" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                    </div>
            </el-form>
        </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="handleClose">取消</el-button>
            <el-button size="small" type="primary" @click="handleSend" v-if="this.addUserData.type !== 'view'">确定</el-button>
        </span>
      </a-modal>
</template>

<script>
export default {
    props: ['addUserData'],
    data() {
        return {
          loading: false,
          activeNames: ['1', '2', '3'],
          roleData: [], //角色数据
          parames: {
              id: '',
              customerId: '', //客户id
              contactsName: '', //姓名
              contactsRole: [], //角色
              contactsMobile: '', //手机号码
              remark: '', //备注
              contactsRoleName: []
          },
          data: {},
          rules: {
            contactsName: [
              { required: true, message: "请输入", trigger: ['blur','change'] },
            ],
            contactsRole: [
              { required: true, message: "请选择", trigger: ['blur','change'] },
            ]
          },
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        changeRole () {
          let roleNames = []
          this.parames.contactsRole.forEach(el=>{
            this.roleData.forEach(bl=>{
              if(el == bl.name) {
                roleNames.push(bl.desc)
              }
            })
          })
          this.parames.contactsRoleName = roleNames
        },
        handleSend () { //提交信息(3种情况，新建客户保存不带id,修改客户时的新增，修改客户时的编辑)
          this.$refs['parames'].validate((valid) => {
            if (valid) {
              if (this.addUserData.type == 'saveEdit') { //修改保存成功
                  this.$post(this.$api.postCustomerContactsEdit,this.parames).then(response => {
                    if (response.data.succeed) {
                      this.$message({ type:'success',message: '修改成功'})
                      this.$emit('checkRender') //刷新父级页面
                      this.handleClose()
                    }
                  })
                } else if (this.addUserData.type == 'new') { //新建时新增
                  this.$emit('addCustomer',JSON.stringify(this.parames),'new','')
                  setTimeout(() => {
                    this.handleClose()
                  }, 200);
                } else if (this.addUserData.type == 'newEdit') { //新建时的修改
                  this.$emit('addCustomer',JSON.stringify(this.parames),'newEdit',this.addUserData.index,)
                  this.handleClose()
                } else if (this.addUserData.type == 'saveNew') {
                  this.$post(this.$api.postCustomerContactsAdd,this.parames).then(response => {
                    if (response.data.succeed) {
                      this.$message({ type:'success',message: '新增成功'})
                      this.$emit('checkRender') //刷新父级页面
                      this.handleClose()
                    }
                  })
                }
            }
          })
        },
        render () {
          this.$post(this.$api.postCustomerContactsRole).then(response => {
            if (response.data.succeed) {
              this.roleData = response.data.data
            }
          })
          if (this.addUserData.type == 'newEdit' || this.addUserData.type == 'saveEdit' || this.addUserData.type == 'view') {
              // this.parames = JSON.parse(this.addUserData.data)
              let data = JSON.parse(this.addUserData.data)
              this.parames.contactsName = data.contactsName
              this.parames.customerId = data.customerId
              this.parames.id = data.id
              this.parames.contactsMobile = data.contactsMobile
              this.parames.contactsRole = data.contactsRole
              this.parames.remark = data.remark
              this.parames.contactsRoleName = data.contactsRoleName
            } else if (this.addUserData.type == 'saveNew') {
              this.parames.customerId = this.addUserData.id
            } 
        },
        handleClose () { //关闭弹窗
            this.addUserData.show = false
        },
        resetData () {
          this.$refs['parames'].resetFields()
          this.parames.id = ''
          this.parames.contactsName = ''
          this.parames.contactsRole = []
          this.parames.contactsRoleName = []
          this.parames.customerId = ''
          this.parames.contactsMobile = ''
          this.parames.remark = ''
        }
    },
    components: {
    },
    computed: {
      changeDialog () {
        return this.addUserData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.render()
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style>
.addUser .ant-modal-body{
  padding: 0;
}
</style>